<template>
  <div class="dispose">
    <div class="black">
      <el-row style="font-size: 18px;text-align: center;font-weight: bold">集客-采集信息</el-row>
      <div :model="ruleForm" style="border:0px solid black;font-size: 14px;margin-left: 22%">
        <el-row>数据所有人：{{ruleForm.culueEmpid.empName}}</el-row>
        <el-row style="margin-left: 14%">来源：{{ruleForm.cucType}}</el-row>
        <el-row v-if="ruleForm.cucLinkName != null" style="margin-left: 5%">
          <el-col :span="6">提交内容：</el-col>
          <el-col :span="8">尊姓：{{ruleForm.cucLinkName}}</el-col>
        </el-row>
        <el-row v-if="ruleForm.cucLinkPhone != null" style="margin-left: 24%">手机号：{{ruleForm.cucLinkPhone}}</el-row>
        <el-row v-if="ruleForm.cuclinkProvince != null" style="margin-left: 29%">地址：{{ruleForm.cuclinkProvince}} {{ruleForm.cuclinkCity}} {{ruleForm.cuclinkArea}} {{ruleForm.cuclinkXxaddress}}</el-row>
        <el-row style="margin-left: 5%">提交时间：{{ruleForm.cucSubmitTime | formatDate}}</el-row>
        <el-row style="margin-left: 14%">状态：
          <span v-if="ruleForm.cucStatus==2">未处理</span>
          <span v-if="ruleForm.cucStatus==1">已处理</span>
          <span v-if="ruleForm.cucStatus==0">已失效</span>
        </el-row>
      </div>
      <el-row style="margin-left: 60px;margin-bottom: 20px">
        <el-col :span="12">
          <el-button @click="adds" style="width: 130px" type="primary" :disabled=dis>加为客户</el-button>
        </el-col>
        <el-col :span="12">
          <el-button @click="she" style="width: 130px" :disabled=dis>设为无效</el-button>
        </el-col>
      </el-row>
    </div>

<!--    新增弹框-->
    <el-dialog
      title="加为客户"
      :visible.sync="add" style="width: 120%;margin-left: -40px">
      <el-form :model="addForm" ref="addForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司:" prop="cucGather">
              <el-input v-model="addForm.cucGather" placeholder="公司名称" style="width: 216px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司地址:" prop="cusAddressArea">
              <v-distpicker :province="cusAddressProvince" @province="cusChangeProvince"
                            :city="cusAddressCity" @city="cusChangeCity"
                            :area="cusAddressArea" @area="cusChangeArea"
                            class="distpicker-address-wrapper"></v-distpicker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人姓名:" prop="cucLinkName">
              <el-input v-model="addForm.cucLinkName" style="width: 216px" placeholder="联系人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="cucLinkPhone">
              <el-input v-model="addForm.cucLinkPhone" oninput="value=value.replace(/[^\d.]/g,'')" style="width: 216px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系地址:" prop="cuclinkArea">
              <v-distpicker :province="addForm.cuclinkProvince" @province="changeProvince"
                            :city="addForm.cuclinkCity" @city="changeCity"
                            :area="addForm.cuclinkArea" @area="changeArea"
                            class="distpicker-address-wrapper"></v-distpicker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址:" prop="cuclinkXxaddress">
              <el-input v-model="addForm.cuclinkXxaddress" style="width: 216px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注:" prop="cucRemark">
            <el-input type="textarea" v-model="addForm.cucRemark" :row="4" style="width: 605px"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
<!--        按钮-->
        <el-button type="primary" style="margin-left: 84%;margin-bottom: 20px" @click="confirmAdd('addForm')">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  import {formatTimeToStr} from '@/assets/format'
export default {
  inject: ['reload'],
  name: 'CuDispose',
  components: { VDistpicker },
  data () {
    // 查询客户名是否存在
    var checkedCusName = (rule, value, callback) => {
      if(this.updateCusName == value){
        console.log(this.updateCusName+","+value)
        // 如果修改客户信息时没有修改客户名称，就不做校验
        callback();
      }else{
        console.log(this.updateCusName+","+value)
        this.$axios.get("http://localhost:8088/vue/select-cusname",{params:{cusName:value}})
          .then(v=>{
            console.log(v.data)
            if(v.data != null && v.data != ""){
              callback(new Error("该客户名已存在，请重新输入"))
            }else{
              callback()
            }
          }).catch()
      }
    };
    // 查询联系人表联系电话是否重复
    var checkedCupPhone = (rule, value, callback) => {
      if(this.updateCupPhone == value){
        // 如果修改联系人信息时没有修改联系人电话，就不做校验
        callback();
      }else{
        console.log(this.updateCupPhone+","+value)
        this.$axios.get("http://localhost:8088/vue/select-cupphone",{params:{cupPhone:value}})
          .then(v=>{
            console.log(v.data)
            if(v.data != null && v.data != ""){
              callback(new Error("联系电话重复！请重新输入"))
            }else{
              callback()
            }
          }).catch()
      }
    };
    // 校验客户地址
    var checkCusAdress = (rule, value, callback) => {
      alert(this.cusAddressArea)
      if (this.cusAddressArea=="区" || this.cusAddressArea==undefined) {
        return callback(new Error('请输入公司地址'));
      }else{
        callback()
      }
    };
    return {
      updateCusName:'',//查询客户名称
      updateCupPhone:'',//修改联系电话时校验
      dis:false,
      totalSize: 0, //     总条数
      currPage: 1, //     默认第一页
      pageSize: 0, //      页大小
      add: false, // 新增弹框
      ruleForm: [],//处理页面信息
      addForm:[],//新增客户表单
      cusAddressProvince:'',//客户省
      cusAddressCity:'',//客户市
      cusAddressArea:'',//客户区
      rules:{
        cucGather:[
          {required:true,message: '请输入公司名称', trigger: 'change'},

        ],
        /*cusAddressArea:[
          {required:true,message: '请输入公司地址', trigger: 'change'},
          {validator:checkCusAdress, trigger: 'change'}
        ],*/
        cucLinkName: [//联系人
          { required: true, message: '请输入联系人', trigger: 'change' }
        ],
        cucLinkPhone:[
          {required:true,message: '请输入联系电话',trigger: 'change'},
          {pattern: /^1[3456789]\d{9}$/,message: '请输入正确的联系电话',trigger:'change'},
          {validator:checkedCupPhone,trigger: 'change'}
        ],
        cuclinkArea:[
          {required:true,message: '请输入联系地址',trigger: 'change'},
        ],
        cuclinkXxaddress:[
          {required:true,message:'请输入详细地址',trigger:'change'},
        ]
      }
    }
  },
  created: function () {
    if(this.$route.query.culue != null && this.$route.query.culue != ""){
      this.ruleForm=this.$route.query.culue
      if(this.ruleForm.cucStatus!= null && this.ruleForm.cucStatus!="2"){
        this.dis=true
      }else {
        this.dis=false
      }
    }
    // 方便自定义校验
    this.updateCusName=this.ruleForm.cucGather
    this.updateCupPhone=this.ruleForm.cupPhone
  },
  methods: {
    changeProvince(a){//省
      this.addForm.cuclinkProvince=a.value
    },
    changeCity(a){//市
      this.addForm.cuclinkCity=a.value
    },
    changeArea(a){//区
      this.addForm.cuclinkArea=a.value
    },
    cusChangeProvince(a){
      this.cusAddressProvince=a.value
    },
    cusChangeCity(a){
      this.cusAddressCity=a.value
    },
    cusChangeArea(a){
      this.cusAddressArea=a.value
    },
    adds(){//加为客户按钮
      this.add=true
      // 将对象转为json再转为对象
      this.addForm=JSON.parse(JSON.stringify(this.ruleForm))
      console.log(this.addForm)
    },
    she(){//设为无效按钮
        this.$confirm('此操作将把线索设为无效, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var cucId = JSON.stringify({cucId: this.ruleForm.cucId})
          this.$axios.post("http://localhost:8088/vue/update-culue", this.qs.stringify({cucId: cucId}))
            .then(() => {
              this.$message({
                type: 'success',
                message: '设为失效成功!'
              })
              // 跳转页面刷新表格
              this.$router.push({
                path:'/culuechi'
              })
            }).catch()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消设置'
          })
        })

    },
    confirmAdd (formName) { // 新增为客户确认按钮
      console.log("ruleForm:"+this.ruleForm)
      this.$refs[formName].validate((valid) => {
          if (valid) {//如果通过验证
            this.add = false
            var cuclue=JSON.stringify({cuclue:this.addForm})
            this.$axios.post("http://localhost:8088/vue/add-customer",this.qs.stringify({cuclue:cuclue,cusAddressProvince:this.cusAddressProvince,cusAddressCity:this.cusAddressCity,cusAddressArea:this.cusAddressArea}))
            .then(()=>{
              this.$message.success('新增成功')
              this.reload()
              this.$router.push({
                path:'/culuechi'
              })
            }).catch()
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    }
  },
  watch:{
    $route(){
      if(this.$route.query.culue != null && this.$route.query.culue != ""){
        this.ruleForm=this.$route.query.culue
        if(this.ruleForm.cucStatus!="2"){
          this.dis=true
        }else {
          this.dis=false
        }
      }
      // 方便自定义校验
      this.updateCusName=this.ruleForm.cucGather
      this.updateCupPhone=this.ruleForm.cupPhone
    }
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  },
}
</script>

<style scoped>
  .dispose{
    width: 100%;
    min-height: 650px;
    background: white;
    border-radius: 5px;
    border:1px solid #ccc;
    box-shadow: #ccc 0px 0px 10px;
    overflow:hidden;
  }

  .black{
    width:450px;
    min-height: 500px;
    margin-bottom:40px;
    margin-left:30%;
    margin-top:40px;
    border: 1px solid gray;
    border-radius: 5px;
  }

  .black .el-row{
    margin-top: 30px;
    font-size: 16px;
  }

</style>
<style>
  .distpicker-address-wrapper select {
    width: 80px;
  }
</style>
